<template>
  <div>
    <p>渲染器设置(锯齿模糊、背景颜色)</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { h, nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
nextTick(() => {
  const scene = new THREE.Scene();
  const Dom = document.querySelector(".three_box");
  const width = Dom.offsetWidth;
  const height = Dom.offsetHeight;
  const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 3000);
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //是否执行抗锯齿，默认不抗false
  });
  const xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  const amLight = new THREE.AmbientLight(0xffffff, 1.0);
  const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
  dirLight.position.set(200, 200, 200);
  scene.add(amLight);
  scene.add(dirLight);
  //   形状
  const boxGeo = new THREE.BoxGeometry(50, 50, 50);
  //   材质
  const material = new THREE.MeshPhongMaterial({
    color: 0x00ffa0,
    shininess: 10,
    specular: 0xffffff,
    transparent: true,
    opacity: 1,
  });
  //   对象
  const boxMesh = new THREE.Mesh(boxGeo, material);
  boxMesh.position.set(0, 0, 0);
  scene.add(boxMesh);
  //   相机
  camera.position.set(-200, 200, 200);
  camera.lookAt(boxMesh.position);
  // 渲染器
  renderer.setSize(width, height);
  //   *****************  画布背景 ***************
  renderer.setClearColor(0x444444);
  renderer.render(scene, camera);
  Dom.appendChild(renderer.domElement);
  //   ***************** 告诉threeJS 设备屏幕像素比 ************************
  renderer.setPixelRatio(window.devicePixelRatio);
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
});
</script>

<style scoped>
.three_box {
  position: relative;
  width: 80vw;
  height: 80vh;
  background-color: #e23b3b;
}
</style>